import { useRef, useState, useEffect } from 'react';
import {
  loadDateAPI,
  addOneAPI,
  loadOneByAPI,
  modifyByIdAPI,
  deleteByIdAPI,
  deleteManyByIdsAPI,
} from './liebiao';
import { HighlightOutlined, PlusOutlined, RobotOutlined } from '@ant-design/icons';
import {
  ModalForm,
  PageContainer,
  ProTable,
  ProFormText,
  ProForm,
} from '@ant-design/pro-components';
import { Space, Button, Popconfirm } from 'antd';
import { dalImg } from '../../utils/tools';
import MyEditor from '../../components/myupload/MyEditor';

function Wzlb() {
  const [isShow, setIsShow] = useState(false);
  const [html, setHtml] = useState('');
  const actionRef = useRef();
  const [currentId, setCurrentId] = useState(''); //记录当前ID，用来区分新增还是修改
  const [myForm] = ProForm.useForm(); //获取表单
  const [selRows, setSelRows] = useState([]); //选中的行ID
  useEffect(() => {
    //关闭窗口重置数据
    if (!isShow) {
      setCurrentId('');
    }
  }, [isShow]);

  //当前数据列
  const columns = [
    {
      title: '序号',
      align: 'center',
      render(r, j, i) {
        return i + 1;
      },
      //不想让搜索到的东西这个可以隐藏起来
      hideInSearch: true,
    },
    {
      title: '名字',
      dataIndex: 'name',
    },
    {
      title: '查看次数',
      dataIndex: 'views',
    },
    {
      title: 'wz类别',
      // dataIndex: 'illnessCategory',
      // render(v) {
      //   return <>{v.illnessCategory.data}</>
      // }
    },
    {
      title: '介绍',
      dataIndex: 'desc',
    },
    {
      title: '照片',
      render(v) {
        return <img className="d-t" src={dalImg(v.image)} />;
      },
    },
    {
      title: '操作',
      render(v) {
        return (
          <Space>
            <Button
              type="default"
              icon={<HighlightOutlined />}
              size="small"
              onClick={async () => {
                //获取数据
                const info = await loadOneByAPI(v.id);
                // console.log(info)
                myForm.setFieldValue(info.data);
                setIsShow(true);
                setCurrentId(v.id); //有了这个就能知道当前是新增还是修改
              }}
            ></Button>
            <Popconfirm
              title="是否确认删除？"
              onConfirm={async () => {
                await deleteByIdAPI(v.id);
                actionRef.current?.reload();
              }}
            >
              <Button type="default" danger icon={<RobotOutlined />} size="small"></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    //PageContainer整个页面布局容器
    <PageContainer>
      <ProTable
        // ProTable 这个属性可以直接操作表格中的各种方法
        rowKey="id"
        //批量删除
        rowSelection={{
          //删除之后想让已选择的项目消失
          selectedRowKeys: selRows, //下面设置点击删除之后清空

          onChange(selectedRowKeys) {
            // console.log(selectedRowKeys)
            setSelRows(selectedRowKeys);
          },
        }}
        actionRef={actionRef}
        columns={columns}
        //request是proTable里面很重要的api
        request={loadDateAPI}
        toolBarRender={() => {
          //新增
          //操作按钮数据，默认只有一个新增按钮
          const tools = [
            <Button
              type="primary"
              icon={<PlusOutlined />}
              key={1}
              onClick={() => {
                setIsShow(true);
              }}
            />,
          ];
          //如果勾选了指定的行，显示多行删除按钮
          if (selRows.length > 0) {
            tools.push(
              <Button
                type="primary"
                danger
                key={2}
                onClick={async () => {
                  //通过join拼接数组
                  await deleteManyByIdsAPI(selRows.join(','));
                  actionRef.current?.reload(); //删除之后重新加载数据
                  setSelRows([]); //清空选择的值
                }}
              >
                批量删除
              </Button>,
            );
          }
          return tools;
        }}
      />
      {/* 模态表单 */}
      {/* //表示模态框的属性 */}
      <ModalForm
        form={myForm}
        title="编辑"
        modalProps={{
          maskClosable: false, //点击遮罩层 不关闭
          destroyOnClose: true, //再次点击输入框的内容消失
        }}
        open={isShow}
        onFinish={async (v) => {
          // console.log(v)
          //存在修改 不存在新增
          if (currentId) {
            await modifyByIdAPI(currentId, v);
          } else {
            await addOneAPI(v); //调接口取数据
          }

          setIsShow(false);
          actionRef.current?.reload(); //重新加载数据
        }}
        onOpenChange={setIsShow}
      >
        <ProFormText
          label="姓名"
          placeholder="请输入姓名"
          name="name"
          rules={[
            {
              required: true,
              message: '名字不能为空',
            },
          ]}
        ></ProFormText>
        <ProFormText label="详情">
          <MyEditor html={html} setHtml={setHtml} />
        </ProFormText>
      </ModalForm>
    </PageContainer>
  );
}

export default Wzlb;
